<template>
  <div class="bill">

                <!-- 头部 -->
    <mt-header title="我的订单">
      <router-link slot="left" :to="{ name: `${this.back}` }">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>

    <!-- 订单预览 -->
    <div  class="order" v-for="(item,i) in ordersData" :key="i">
      <!-- 开头 -->
      <div class="order-div1">
        <div class="order-d1">
          <span class="div1-sp1">{{item.house_name}}</span>
        </div>
        <div class="order-d2">
          <span class="div1-sp2">已预约</span>
        </div>
      </div>
        <div class="order-div2">
          <div class="order-dv-img">
              <div class="d-oimg">
                <img class="oimg" v-if="item.image" :src=item.image alt="">
              </div>
                
              
          </div>
          
      <div class="order-dv2-wz">
        <div class="div2-sp1">
        <span>已约时间:{{item.order_time}}</span>
        </div>
        <div class="div2-btn">
          <button class="div-bt1">查看详情</button>
        <button class="div-bt2" @click="cancel(item)">取消预约</button>
        </div>
        
    </div>
  
</div>
   </div>
  </div>
</template>
<script>
import Popup from "./Popup.vue";
export default {
  components: {
    Popup,
  },
  data() {
    return {
      back: "user",
      ordersData: {}
    };
  },
  methods:{
    cancel(item){
      let oid = item.oid
      this.axios.delete(`/cancelorder?oid=${oid}`).then(res=>{
        if (res.data.code == 200) {
          this.$toast({
            message: `取消预约成功`,
            position: "bottom",
            duration: 2000,
            className: "toast"
          });
          let uid = this.$store.state.dataUser.uid;
          this.axios.get(`/getorder?uid=${uid}`).then(res=>{
          res.data.result.forEach(item=>{
          if(item.house_photo){
            item.image=require(`../assets/img/roomshow/${item.house_photo}`)
          }
        this.ordersData=res.data.result;
      })
      })
        }else{
          this.$toast({
            message: `取消预约失败`,
            position: "bottom",
            duration: 2000,
            className: "toast"
          });
        }
      })
    }
  },
  mounted(){
      let uid = this.$store.state.dataUser.uid;
      this.axios.get(`/getorder?uid=${uid}`).then(res=>{
        res.data.result.forEach(item=>{
          if(item.house_photo){
            item.image=require(`../assets/img/roomshow/${item.house_photo}`)
          }
        this.ordersData=res.data.result;
      })
  })
  }
};
</script>
<style >

.bill .order {
  margin-top: 1rem;
  background-color: #ffff;
}
.bill .order-div1{
  display: flex;
}
 /* 小区名字和预约状态 */
.bill .order-d1{
  width: 80%;
  margin-left: 18px;
  margin-top: 10px;
}
.bill .order-d2{
  width: 20%;
  margin-top: 3px;
      margin-top: 15px;
}
 
.bill .div1-sp1{
  font-weight:bold;
      font-size: 20px;
   
}
.bill .div1-sp2{
 
    margin-right: 10px;
    color: #15b982;
    
}
/* 图片 */
.bill .order-div2{
  display: flex;
  
   margin-top: 10px;
}
.bill .order-dv-img{
  width: 37%;
 
}
.bill .odiv-img{
  width: 45px;
  height: 45px;
}
.bill .oimg{
  height: 87px;
  width: 100%;
  border-radius: 10px;
    
}
.bill .order-dv2-wz{
  width: 63%;
}
.bill .d-oimg{
      padding: 0px 2px;
    margin-left: 12px;
}
.bill .div2-sp1{
  font-size: 12px;
  color: #ab9797;
  margin-left: 39px;
}
.bill .div2-btn{
  margin-left: 47px;
  margin-top: 26px;
}
.bill .div-bt1{
  
  margin-right: 10px;
  background-color: #e0dddd;
    color:#422d2d;
    width: 80px;
    height: 30px;
    border: 0;
    font-size: 16px;
    box-sizing: content-box;
    border-radius: 5px;
}
.bill .div-bt2{
  background-color: #f66f6a;
    color: white;
    width: 80px;
    height: 30px;
    border: 0;
    font-size: 16px;
    box-sizing: content-box;
    border-radius: 5px;
  
}
.bill .div4-sp1{
   font-size: 12px;
  color: #ab9797;
  margin-left: 65px;
  margin-top: 6px;
  margin-bottom: 15px;
}
.toast{
  z-index: 9999 !important;
}
</style>